<template>
  <div class="table-page mt-10 pt-0 px-12">
    <a-form label-align="right" layout="inline" auto-label-width :model="listParams" size="small" class="form my-10">
      <a-form-item field="categoryId" hide-label>
        <a-tree-select
          allow-clear
          :data="cateArr"
          :field-names="{ title: 'name', key: 'id' }"
          placeholder="选择分类筛选"
          class="w-50n"
          @change="changeCurrent(1)"
          :selectable="selectable"
          v-model="listParams.categoryId"
        ></a-tree-select>
      </a-form-item>
      <a-form-item field="status" hide-label>
        <a-select
          class="w-50n"
          v-model="listParams.isTop"
          allow-clear
          placeholder="置顶状态"
          @change="changeCurrent(1)"
        >
          <a-option :value="0" label="未置顶"></a-option>
          <a-option :value="1" label="已置顶"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="keyword" hide-label>
        <a-input v-model="listParams.keyword" placeholder="输入关键字检索" @press-enter="changeCurrent(1)"></a-input>
      </a-form-item>
      <a-form-item hide-label>
        <a-space>
          <a-button type="primary" size="small" @click="getTableData">
            <template #icon>
              <icon-search />
            </template>
            <template #default>查询</template>
          </a-button>
          <a-button size="small" @click="onResetSearch">
            <template #icon>
              <icon-sync />
            </template>
            <template #default>重置</template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <div class="w-full flex-1 overflow-hidden">
      <a-table
        row-key="id"
        v-model:columns="columns"
        :loading="loading"
        :data="tableData"
        :selected-keys="checkedValue"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="pagination"
        :row-selection="{ type: 'radio' }"
        @select="onSelect"
      >
        <template #isTop="{ record }">
          <a-switch :checked-value="1" :unchecked-value="0" v-model="record.isTop" disabled></a-switch>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import ImgHoverPreview from '@/components/ImgHoverPreview/index.vue'
import { businessSchoolArticleList, businessSchoolCateList, linkSelect } from '@/apis'
import { usePagination } from '@/hooks'
const props = defineProps(['tabCurrentInfo', 'displayInfo'])
const emit = defineEmits(['handleCheck'])
const columns = ref([
  {
    title: '文章标题',
    width: 200,
    dataIndex: 'title'
  },
  {
    title: '封面图片',
    width: 120,
    render: (data) => {
      const url = data.record.pic
      return h(ImgHoverPreview, { url, width: 50 })
    }
  },
  {
    title: '分类',
    width: 120,
    render: ({ record }) => {
      return record.categoryId2Name ? `${record.categoryId1Name}=>${record.categoryId2Name}` : record.categoryId1Name
    }
  },
  {
    title: '类型',
    width: 120,
    render: (data) => {
      const type = data.record.type
      return type == 1 ? '图文' : '视频'
    }
  },
  {
    title: '置顶',
    width: 90,
    align: 'center',
    slotName: 'isTop'
  },
  {
    title: '发布时间',
    width: 180,
    align: 'center',
    dataIndex: 'createdAt'
  }
])

const loading = ref(false)
const tableData = ref([])
const cateArr = ref([])
const checkedValue = ref([])
const listParams = reactive({
  pageSize: 10,
  page: 1,
  categoryId: undefined,
  isTop: undefined,
  keyword: undefined
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.pageSize })
;(async () => {
  const res = await businessSchoolCateList()
  cateArr.value = res.data.list
})()
// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    const res = await businessSchoolArticleList(listParams)
    tableData.value = res.data.list
    setTotal(res.data?.count ?? 0)
  } finally {
    loading.value = false
  }
}
getTableData()

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.categoryId = listParams.isTop = listParams.keyword = undefined
  changeCurrent(1)
}

const selectable = (e) => {
  return !e?.children?.length
}

watch(
  () => props.displayInfo,
  (newValue) => {
    if (newValue.typeId == 13 && newValue.id) {
      checkedValue.value = [Number(newValue.id)]
      listParams.id = newValue.id
    } else {
      checkedValue.value = []
    }
    changeCurrent(1)
  },
  { deep: true, immediate: true }
)

// 选择
const onSelect = async (e) => {
  const itemData = tableData.value.find((item) => {
    return e[0] === item.id
  })
  const res = await linkSelect({
    rule: props.tabCurrentInfo.rule,
    isLogin: props.tabCurrentInfo?.isLogin ?? undefined,
    param: {
      id: itemData.id,
      title: itemData.title
    }
  })
  emit('handleCheck', res.data ?? '')
}
</script>

<style lang="scss" scoped></style>
